//加载完成后执行
window.addEventListener('load', function () {
    //获得大盒子元素
    var focus = document.querySelector('.focus')
    //左右箭头
    var arrow_l = document.querySelector('.arrow-l')
    var arrow_r = document.querySelector('.arrow-r')
    //装图片的ul
    var ul = focus.querySelector('ul')
    //装小圆点的ol
    var ol = focus.querySelector('ol')
    //focus 的宽度，就是ul滚动的距离
    var focusWidth = focus.offsetWidth

    //鼠标移入移出focus时，左右箭头显示隐藏
    focus.addEventListener('mouseenter', function () {
        arrow_l.style.display = 'block'
        arrow_r.style.display = 'block'
        //鼠标移入时清除自动轮播
        clearInterval(timer)
        timer = null
    })

    focus.addEventListener('mouseleave', function () {
        arrow_l.style.display = 'none'
        arrow_r.style.display = 'none'
        //鼠标移出时，启用定时器
        timer = setInterval(function () {
            arrow_r.click()
        }, 2000)
    })

    //根据图片数量创建小圆点的数量
    for (var i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li')
        //同时给li添加自定义属性data_index
        li.setAttribute('data_index', i)
        ol.appendChild(li)

        //给li添加点击事件
        li.addEventListener('click', function () {
            //li的排他
            ol.querySelector('.current').classList.remove('current')
            this.classList.add('current')
            //获得当前li的自定义属性
            var data_index = this.getAttribute('data_index')
            //将data_index的值与图片和箭头点击事件绑定
            num = data_index
            circle = data_index
            //节流阀保险
            flag = true
            //根据data_index的值，让ul滚动
            animate(ul, -num * focusWidth)
        })
    }

    //将第一张图片克隆到ul的最后，实现无缝连接效果
    var first = ul.children[0].cloneNode(true)
    ul.appendChild(first)
    //给第一个li添加样式
    ol.children[0].classList.add('current')

    //声明一个num 和 circle变量，用于标识点击次数
    var num = 0
    var circle = 0
    //设置节流阀
    var flag = true
    //给右箭头添加点击事件
    arrow_r.addEventListener('click', function () {
        if (flag) {
            //点击箭头之后关闭阀门，动画完成后打开阀门
            flag = false
            //当点击到最后一张图片时，让ul跳回到第一张图，num重置
            if (num == ul.children.length - 1) {
                ul.style.left = 0
                num = 0
            }
            num++
            animate(ul, -num * focusWidth, function () {
                flag = true
            })

            //控制小圆点的移动
            circle++
            if (circle == ol.children.length) {
                circle = 0
            }
            //li的排他
            ol.querySelector('.current').classList.remove('current')
            ol.children[circle].classList.add('current')

        }

    })

    //左箭头点击事件
    arrow_l.addEventListener('click', function () {
        if (flag) {
            //点击箭头之后关闭阀门，动画完成后打开阀门
            flag = false
            //当点击到第一张图片时，让ul跳回到第四张图，num重置为
            if (num == 0) {
                num = ul.children.length - 1
                ul.style.left = -num * focusWidth + 'px'

            }
            num--
            animate(ul, -num * focusWidth, function () {
                flag = true
            })

            //控制小圆点的移动
            circle--
            //从第一个li跳到最后一个li
            if (circle < 0) {
                circle = ol.children.length - 1
            }
            //li的排他
            ol.querySelector('.current').classList.remove('current')
            ol.children[circle].classList.add('current')
        }


    })

    //自动轮播
    var timer = setInterval(function () {
        //定时器自动调用右箭头点击事件实现自动轮播
        arrow_r.click()
    }, 2000)
})